﻿@{
    Layout = "/Views/Shared/_SubLayout.cshtml";
    ViewBag.Title = "所有產品";
}
<script>
    $(document).ready(function () {
        $.fn.metro.onPrevClick = function () {
            window.location = "/Home";
        };

        loadProducts();
    });

    function changeProduct() {
        var id = $('.metro_grid_row.selected .productID').html();

        if (id == undefined || id == '') {
            showMessage('請選擇需要修改的產品');
        }
        else {
            window.location = "/Home/ProductEdit?id=" + id;
        }
    }
</script>
<script id="metroGridRowTemplate" type="text/x-jquery-tmpl">
    <div class="metro_grid_row">
        <div class="metro_grid_cell hide"><div class="productID">${ID}</div></div>
        <div class="metro_grid_cell"><div>${Name}</div></div>
        <div class="metro_grid_cell"><div>${ProductType}</div></div>
        <div class="metro_grid_cell"><div>${Brand}</div></div>
        <div class="metro_grid_cell"><div>${Model1}</div></div>
        <div class="metro_grid_cell"><div>${ListPriceStr}</div></div>
        <div class="clear">
        </div>
    </div>
</script>
<script id="metroGridTemplate" type="text/x-jquery-tmpl">
    <div class="metro_grid">
        <div class="metro_grid_contain">
            <div class="metro_grid_header">
                <div class="metro_grid_column hide"><div></div>
                </div>
                <div class="metro_grid_column" data-width="120">
                    <div>名稱</div></div>
                <div class="metro_grid_column" data-width="auto">
                    <div>類別</div></div>
                <div class="metro_grid_column" data-width="200">
                    <div>品牌</div></div>
                <div class="metro_grid_column" data-width="120">
                    <div>型號</div></div>
                <div class="metro_grid_column" data-width="120">
                    <div>價格</div></div>
                <div class="clear">
                </div>
            </div>
            <div class="metro_grid_rows">
                {{tmpl(List) "#metroGridRowTemplate"}}
            </div>
        </div>
    </div>
</script>
<div id="ProductMgt">
    <div class="metro_toolbar">
        <div class="metro_input_contain">
            <a class="metro_input_btn" href="/Home/ProductEdit">新增產品</a>
            <a class="metro_input_btn" onclick="changeProduct();">修改產品</a>
        </div>
    </div>
    
</div>
<script>
    function loadProducts() {
        showLoading();        
        var url = "/Home/GetProducts";
        $.ajax({
            url: url,         //请求链接 
            dataType: "json",
            success: function (result) {
                $('#metroGridTemplate').tmpl(result).appendTo($('#ProductMgt'));
                $('.metro_grid').metro_grid();

                hideLoading();
            }
        });
    }
</script>
